<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/reset.css">
    <link rel="stylesheet" href="./static/css/shortcut.css">
    <link rel="stylesheet" href="./static/css/header.css">
    <link rel="stylesheet" href="./static/font/iconfont.css">
    <link rel="stylesheet" href="./static/css/detail.css">
</head>

<body>
    <!--顶部导航栏  -->
    <div class="shortcut">
        <div class="w1200">
            <!-- 左侧登录注册 -->
            <div class="login-box fl">
                优购商城欢迎你！
                <a href="#">登录</a>
                <a href="#">免费注册</a>
            </div>
            <!-- 右侧快捷导航 -->
            <div class="nav-box fr">
                <a href="#">我的订单</a>
                <span>|</span>
                <a href="#">我的优购</a>
                <span>|</span>
                <a href="#">会员</a>
                <span>|</span>
                <a href="#">企业采购</a>
                <span>|</span>
                <a href="#">客户服务</a>
                <span>|</span>
                <a href="#">网站导航</a>
            </div>
        </div>
    </div>
    <!-- 顶部导航栏结束 -->
    <!-- 头部logo和搜索区 -->
    <div class="header">
        <div class="header-box w1200">
            <div class="logo">
                <img src="./static/images/img/logo3.png" alt="">
            </div>
            <div class="search">
                <input type="text" class="fl" placeholder="gtx3090">
                <button class="fl">
                <span class="iconfont icon-fangdajing"></span>
            </button>
            </div>
            <!-- 热门关键词 -->
            <div class="hotwords">
                <a href="#" class="current">新款连衣裙</a>
                <a href="#">四件套</a>
                <a href="#">潮流T恤</a>
                <a href="#">时尚女鞋</a>
                <a href="#">短裤</a>
                <a href="#">半身裙</a>
                <a href="#">男士外套</a>
                <a href="#">墙纸</a>
            </div>
            <div class="cart">
                <span class="iconfont icon-qicheqianlian-select-copy"></span> 我的购物车
                <i>8</i>
            </div>
        </div>
        <!-- 频道导航区 -->
        <div class="nav w1200">
            <div class="dropdown fl">
                <div class="dt">全部商品分类</div>
                <div class="dd" style="display: none;">
                    <ul>
                        <li class="item">
                            <a href="http://www.baidu.com">家用电器</a> /
                            <a href="http://www.baidu.com">大家电</a>
                            <span class="iconfont icon-chevron-right-single"></span>
                        </li>
                        <li class="item">
                            <a href="#">手机 / 数码 / 通信</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">电脑 / 办公</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">家居 / 家具 / 家装 / 厨具</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">男装 / 女装 / 童装 / 内衣</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">个户化妆 / 清洁用品 / 宠物</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">鞋靴 / 箱包 / 珠宝 / 奢侈品</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">运动户外 / 钟表</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">汽车 / 汽车用品</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">母婴 / 玩具乐器</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">食品 / 酒类 / 生鲜 / 特产</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">医药保健</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">图书 /音像 / 电子书</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">彩票 / 旅行 / 充值/票务</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                        <li class="item">
                            <a href="#">理财 / 众筹 / 白条 / 保险</a>
                            <span class="iconfont icon-chevron-right-single">
                        </li>
                    </ul>
                </div>

            </div>
            <div class="navitems fl">
                <a href="#">潮服饰</a>
                <a href="#">美妆馆</a>
                <a href="#">电玩街</a>
                <a href="#">电器城</a>
                <a href="#">家世界</a>
                <a href="#">母婴区</a>
                <a href="#">会员专享</a>
            </div>
        </div>
    <!-- logo和搜索区  结束 -->

    <div class="goods-info">
        <div class="w1200" style="height: 607px;">
            <!-- 商品面包屑导航 -->
            <div class="breadcrumb">
                <a href="#">手机、数码、通讯</a> &gt;
                <a href="#">手机</a> &gt;
                <a href="#">华为 mate 系列</a> &gt;
                <a href="#">HUAWEI Mate X2</a> 
            </div>

            <div class="product">
                <!-- 左侧商品图片 开始 -->
                <div class="left fl">
                    <div class="big-pic">
                        <img src="./static/images/img/goods/1-big.png" alt="">
                        <div class="mask"></div>
                        <div class="megaloscope">
                            <img src="./static/images/img/goods/1-big.png" alt="">
                        </div>
                    </div>
                    
                    <div class="small-list">
                        <div class="fl arrow arrow-l">
                            <span class="iconfont icon-col-left1"></span>
                </div>
                <div class="list fl">
                    <div>
                        <img src="./static/images/img/goods/1-small.png" alt="">
                        <img src="./static/images/img/goods/2-small.png" alt="">
                        <img src="./static/images/img/goods/3-small.webp" alt="">
                        <img src="./static/images/img/goods/4-small.png" alt="">
                        <img src="./static/images/img/goods/5-small.png" alt="">
                        <img src="./static/images/img/goods/6-small.png" alt="">
                        <img src="./static/images/img/goods/7-small.png" alt="">
                        <img src="./static/images/img/goods/8-small.png" alt="">
                        <img src="./static/images/img/goods/9-small.png" alt="">
                    </div>
                </div>
                <div class="fr arrow arrow-r">
                    <span class="iconfont icon-zuoyoujiantou"></span>
                </div>
            </div>
        </div>
        <!-- 右侧商品信息 -->
        <div class="right fr">
            <h2 class="title">HUAWEI Mate X2 5G 全网通 8GB+256GB（釉白色）</h2>
            <div class="info">
                <div class="price">
                    <span class="label">价&emsp;&emsp;格</span>
                    <span class="price-title">￥17999.00</span>
                    <span>降价通知</span>
                </div>
                <div class="sales">
                    <span class="label">促&emsp;&emsp;销</span>
                    <span>分期免息</span>
                    <span>银联、花呗、掌上生活、工行分期支付可享免息（免息活动适用于单款免息商品订单，含...</span>
                </div>
                <div class="sales">
                    <span class="label">&emsp;&emsp;&emsp;&emsp;</span>
                    <span>赠送积分</span>
                    <span>购买即赠商城积分，积分可抵现~</span>
                </div>
            </div>
            <div class="select-color selector">
                <span>选择颜色：</span>
                <a href="javascript:;" title="釉白">釉白</a>
                <a href="javascript:;" title="玫瑰金">玫瑰金</a>
                <a href="javascript:;" title="宝石蓝">宝石蓝</a>
                <a href="javascript:;" title="青春粉">青春粉</a>
            </div>
            <div class="select-version selector">
                <span>选择版本：</span>
                <a href="javascript:;" title="4G+128G">4G+128G</a>
                <a href="javascript:;" title="4G+256G">4G+256G</a>
                <a href="javascript:;" title="4G+512G">4G+512G</a>
                <a href="javascript:;" title="8G+512G">8G+512G</a>
            </div>
            <div class="select-type selector">
                <span>套&emsp;&emsp;餐：</span>
                <a href="javascript:;" title="官方标配">官方标配</a>
                <a href="javascript:;" title="电信套餐">电信套餐</a>
                <a href="javascript:;" title="移动套餐">移动套餐</a>
            </div>
            <div class="buy-box">
                <div class="amount fl">
                    <input type="text" class="num" value="1">
                    <a href="javascript:;" class="add">+</a>
                    <a href="javascript:;" class="reduce">-</a>
                </div>
                <a href="javascript:;" class="add-cart">加入购物车</a>
            </div>
        </div>
        <!-- 右侧商品介绍 结束 -->

    </div>
    </div>
    <div class="goods-other-info w1200 clearfix">
        <div class="left fl">
            <div class="title">
                <span>人气精品</span>
                <span>店铺新上</span>
            </div>
            <ul>
                <li>
                    <img src="./static/images/img/11.jpg" alt="">
                    <p>￥358.00</p>
                    <p>努比亚 红魔6R 5G 游戏手机 腾讯 幻影黑 8+128全网通5G</p>
                </li>
                <li>
                    <img src="./static/images/img/22.jpg" alt="">
                    <p>￥358.00</p>
                    <p>努比亚 红魔6R 5G 游戏手机 腾讯 幻影黑 8+128全网通5G</p>
                </li>
                <li>
                    <img src="./static/images/img/33.jpg" alt="">
                    <p>￥358.00</p>
                    <p>努比亚 红魔6R 5G 游戏手机 腾讯 幻影黑 8+128全网通5G</p>
                </li>
                <li>
                    <img src="./static/images/img/44.jpg" alt="">
                    <p>￥358.00</p>
                    <p>努比亚 红魔6R 5G 游戏手机 腾讯 幻影黑 8+128全网通5G</p>
                </li>
                <li>
                    <img src="./static/images/img/55.jpg" alt="">
                    <p>￥358.00</p>
                    <p>努比亚 红魔6R 5G 游戏手机 腾讯 幻影黑 8+128全网通5G</p>
                </li>
            </ul>
        </div>
        <div class="right fr">
            <div class="title-tab">
                <a href="javascript:;" class="current">商品介绍</a>
                <a href="javascript:;">规格与包装</a>
                <a href="javascript:;">售后保障</a>
                <a href="javascript:;">商品评价</a>
            </div>
            <div class="info-tab">
                <div class="current">
                    <img src="./static/uploads/upload/1.png" alt="">
                </div>
                <div>
                    <img src="./static/uploads/upload/2.png" alt="">
                </div>
                <div>
                    <img src="./static/uploads/upload/3-1.png" alt="">
                </div>
                <div>
                    <img src="./static/uploads/upload/4.png" alt="">
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- 商品详情模块 结束 -->

    <!-- 脚部 开始 -->
    <div class="footer">
        <div class="w1200">
            <div class="footer-service">
                <ul class="clearfix">
                    <li>
                        <a href="#">
                            <span class="iconfont icon-banshou"></span> 预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-tian"></span> 7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-tianbaotui"></span> 15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-liwu"></span> 满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-weizhi"></span> 680家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-help">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="#">售后服务</a></dd>
                    <dd><a href="#">自助服务</a></dd>
                    <dd><a href="#">礼券码</a></dd>
                    <dd><a href="#">团购服务</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">微信支付</a></dd>
                    <dd><a href="#">支付宝支付</a></dd>
                    <dd><a href="#">银联卡支付</a></dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd><a href="#">新浪微博</a></dd>
                    <dd><a href="#">微信公众号</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                    <dd><a href="#">加入我们</a></dd>
                </dl>
                <div class="app-download fr">
                    <h3>帮助中心</h3>
                    <div>
                        <img src="./static/images/img/erweima.png" alt="">
                        <p>App下载</p>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <p>
                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 友情链接 | 销售联盟 | English Site | Contact U
                </p>
                <p>
                    地址：西安市雁塔区旺座SOHO 邮编：721000 电话：400-666-8888 传真：029-86868686 邮箱: zsf@163.com <br> 陕ICP备06980110号陕公网安备61030216812
                </p>
            </div>
        </div>
    </div>
    <!-- 脚部 结束 -->

    <script src="./static/js/detail.js"></script>

</body>

</html>